iT邦幫忙

2023 iThome 鐵人賽

DAY 8
1

之前所介紹的,做為格式的集大成者,OpneType 繼承了 PostScript、TrueType、AAT 格式的許多概念,其中影響最大的就是特性(feature)的調用。

對於設計師來說,如果想要設計一套優秀的字型,適當的引用 feature 功能可以讓效果事半功倍;而特性也將字型擴充了好幾個層次,是豐富字型功能及渲染結果的好幫手。

間距留白(sidebearing)

以漢字或是英文(這裡只討論印刷字)這種一個一個字書寫的文字為例,雖然不是很明顯,但字與字之間是存在留白空間的。字符本身並不會塞滿整個「字身框」(也就是實際字符的大小,通常是 1000x1000 或 1024x1024),而是會刻意地往內縮小一點。

我們將字型輪廓本身的外接矩形稱作「字面框」,以漢字來說,字身框的大小注定會比字面框來得大。而字面框與字身框在左右留下的間距,便被稱作左留白(left sidebearing, LSB)與右留白(right sidebearing, RSB)。

對大部分的語言來說,左留白與右留白的大小是一個正值,代表字與字之間有一個曖昧的留白空間。但對於一些需要「連著」書寫的字母來說,為了讓輸入的文字不會看起來是斷著的,字型本身其實是允許字面框超出字身框,也就是將留白值設為負值的。這類的代表以婆羅米系文字(Brahmic scripts)為主,像是天城文(用來書寫梵文)、孟加拉文等,就擁有一條上橫線(這條線被稱作 शिरोरेखा [śirorekhā]),將字與字串接起來。

字間微調整(Kerning, kern)

然而,即使我們已經調整了左右間距,把字符排在一起的時候,偶爾還是會有一些彆扭的空間,如下面的 TAVAT 字樣,每個字中間都好像被切開了,完全沒有一個詞的感覺。

這時候你或許會想到,喔那就像上面說的一樣,將他們的留白設為負值就好了,這樣 TA 之間的距離就會因為負值而縮小了!但接下來你面對了 TEA 這個字,完蛋,如果把 T 的右留白調成負數,那接著的 E 就會被吃到了,三個字反而疊在一起。

在過去的鉛字時代,鑄字師會特意鑄造不同留白的活字,可以按照前後文選擇要使用哪一個,並對內文的排版進行調整。這個動作被稱作 kerning。如下圖所展示的 ps,可以看出他們的輪廓實際上是超出鉛字本身的。

》Image Source: CreativePro

而在現代的數位字型檔案中,我們也可以指定「字符對(glyph pair)」 kerning 的 feature,舉例來說,指定 TA 兩個字符相鄰時,調整兩者之間的留白;但不指定 TE,如此一來,在輸入 TEA 時就不會發生留白被吃掉的問題。

CSS 調用

通常來說,大多的瀏覽器的 kerning feature 都預設開啟,所以其實不用特別設定,但如果想要手動調用的話,可以透過以下 css 啟用

.class {
    font-kerning: normal;
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
    font-feature-settings: "kern";
}

在目前的字型設計軟體中,kerning 的距離都可以分開來設計,讓字與字之間的曖昧距離更加自然。不過,受限於設計,有些字符對即使設定了 kerning,也會看起來怪怪的,此時,鑄字師會近一步鑄造一個「連起來」的字模,也就是連字(ligature)。


上一篇
DAY 07|Unicode 收錄的漢字狀況
下一篇
DAY 09|OpenType Feature (2):連字系列
系列文
一起成為新世紀文字藝術師:深入玩轉 Unicode 和 OpenType30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言